<template>
  <view
    :style="`--bkc:${BackColor}`"
    :class="`index ${LoadingShow ? 'active' : ''} ${isBack ? 'isBack' : ''}`"
  >
    <view class="box active">
      <view class="loading">
        <view v-if="Type == 1" style="background: #fff" class="one">
          <i class="iconfont chat-jinglingqiu bkm"></i>
        </view>
        <view v-if="Type == 2" class="one">
          <i class="iconfont chat-loading_ico"></i>
        </view>
        <view v-if="Type == 3" class="one">
          <i class="iconfont chat-loading"></i>
        </view>
      </view>
      <span class="title">{{ titles }}</span>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineExpose, ref, defineProps, withDefaults } from "vue";

const props = withDefaults(
  defineProps<{
    isBack?: boolean;
    BackColor?: string;
  }>(),
  {
    isBack: false,
    BackColor: "rgba(0, 0, 0, 0)",
  }
);

const LoadingShow = ref<boolean>(false);
const titles = ref<string>("加载中...");
const Type = ref<number>(1);

const show = (title?: string | number, type?: number | string) => {
  if (title) {
    if (typeof title === "string") {
      titles.value = title ?? "加载中...";
    } else {
      Type.value = title ?? 1;
    }
  }
  if (type) {
    if (typeof type === "string") {
      titles.value = type ?? "加载中...";
    } else {
      Type.value = type ?? 1;
    }
  }
  LoadingShow.value = true;
};

const hide = () => {
  LoadingShow.value = false;
};

defineExpose({ show, hide });
</script>

<style lang="scss">
.index {
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0px;
  top: 0px;
  justify-content: center;
  align-items: center;
  z-index: -99;
  transition: 0.3s;
  .box {
    padding: 0.8rem 0.9rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 0.6rem #0000001a;
    display: flex;
    align-items: center;
    justify-content: center;

    .loading {
      display: flex;
      position: relative;
      width: 4rem;
      height: 4rem;
      justify-content: center;
      align-items: center;
      .one {
        display: flex;
        justify-content: center;
        align-items: center;
        animation: Zhuan 1.2s infinite linear;
        position: relative;
        background: $uni-color-primary;
        border-radius: 50%;
        padding: 6rpx;
        .iconfont {
          font-size: 80rpx;
          color: #fff;
        }
        .bkm {
          color: $uni-color-primary;
          font-size: 100rpx;
        }
      }
      .one.active {
        animation: none;
        .icon-bg {
          position: absolute;
          animation: Zhuan 1.2s infinite linear;
        }
        .icon-small {
          position: absolute;
          animation: FanZhuan 1.4s infinite linear;
        }
      }
    }

    .title {
      color: $uni-color-primary;
      margin: 0 0.3rem;
      font-size: 0.9rem;
      letter-spacing: 0.1rem;
    }
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
  }
  .box.active {
    flex-direction: column;
    padding: 0.6rem 1.6rem;
    .title {
      margin: 0.4rem 0rem;
    }
  }
}
.index.isBack {
  .box {
    box-shadow: none;
  }
}
.index.active {
  z-index: 999;
  background-color: var(--bkc);
  .box {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes Zhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes FanZhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
</style>
